<template>
  <div class="h5-editor__panel" :class="{ 'panel-collapsed': scopedCollapsed }">
    <slot></slot>
    <div v-if="trigger" class="collapsed-trigger">
      <menu-unfold-outlined v-if="scopedCollapsed" class="trigger" @click="handleToggleCollapse(false)" />
      <menu-fold-outlined v-else class="trigger" @click="handleToggleCollapse(true)" />
      <span class="text">{{ scopedCollapsed ? '展开' : '折叠' }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const scopedCollapsed = ref(false)
interface IProps {
  collapsed?: boolean
  trigger?: boolean
  beforeToggle?: (newValue: boolean, oldValue: boolean) => void
  afterToggle?: (value: boolean) => void
}

const props = withDefaults(defineProps<IProps>(), {
  // v-model:collapsed="collapsed"
  collapsed: false,
  trigger: false
})
const emit = defineEmits<{
  (event: 'update:collapsed', collapsed: boolean): void
}>()
const handleToggleCollapse = (value: boolean) => {
  props.beforeToggle && props.beforeToggle(value, scopedCollapsed.value)
  scopedCollapsed.value = value
  emit('update:collapsed', value)
  props.afterToggle && props.afterToggle(value)
}
onMounted(() => {
  scopedCollapsed.value = props.collapsed
})
</script>
